<template>
	<view class="">
		<mescroll-uni @init="mescrollInit" @scroll="scroll" @down="downCallback" @up="upCallback" :up="upOption"> 
			<view class="u-m-30">
				<view class="good-list">
					<view :id="'good'+good.id" class="good-li u-m-b-15 bg-white b-r-10" v-for="good in goods"
						:key="good.id" @click="handDetails(good)">
						<image class="good-img" :src="good.img" mode="aspectFill" style="width: 180rpx;height:150rpx" />
						<view class="flex-item relative">
							<view class="good-name u-line-1 u-font-16 c-000 f-w">{{good.actName}}</view>
							<text class="good-price">{{good.desc}}</text>
							<!-- <text class="good-sold">{{good.desc}}件</text> -->

						</view>
						<view class="u-lihe-28 u-he-28 bg-gradual-orange  u-font-12 c-fff b-r-5 text-center"
							style="width: 50px;">
							去领取
						</view>
					</view>
				</view>
			</view>
		</mescroll-uni>
	</view>
</template>
<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		apiGoods
	} from "@/config/api/mock.js"
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				tabIndex: 0, // tab下标
				cityName: "枣庄",
				filterShow: false,
				scrollListShow: true,
				goods: [], // 数据列表
				upOption: {
					use: true, // 是否启用上拉加载; 默认true
					auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
					isLock: false, // 是否锁定上拉加载,默认false;
					isBoth: true, // 上拉加载时,如果滑动到列表顶部是否可以同时触发下拉刷新;默认true,两者可同时触发;
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10, // 每页数据的数量
						time: null // 加载第一页数据服务器返回的时间; 防止用户翻页时,后台新增了数据从而导致下一页数据重复;
					},
					noMoreSize: 3, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
					offset: 80, // 距底部多远时,触发upCallback(仅mescroll-uni生效, 对于mescroll-body则需在pages.json设置"onReachBottomDistance")
					bgColor: "transparent", // 背景颜色 (建议在pages.json中再设置一下backgroundColorTop)
					textColor: "gray", // 文本颜色 (当bgColor配置了颜色,而textColor未配置时,则textColor会默认为白色)
					textLoading: '加载中 ...', // 加载中的提示文本
					textNoMore: '-- END --', // 没有更多数据的提示文本
					toTop: {
						// 回到顶部按钮,需配置src才显示
						src: "https://www.mescroll.com/img/mescroll-totop.png", // 图片路径
						offset: 1000, // 列表滚动多少距离才显示回到顶部按钮,默认1000
						duration: 300, // 回到顶部的动画时长,默认300ms (当值为0或300则使用系统自带回到顶部,更流畅; 其他值则通过step模拟,部分机型可能不够流畅,所以非特殊情况不建议修改此项)
						zIndex: 9990, // fixed定位z-index值
						left: null, // 到左边的距离, 默认null. 此项有值时,right不生效. (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx)
						right: 20, // 到右边的距离, 默认20 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx)
						bottom: 120, // 到底部的距离, 默认120 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx)
						safearea: false, // bottom的偏移量是否加上底部安全区的距离, 默认false, 需要适配iPhoneX时使用 (具体的界面如果不配置此项,则取mescroll组件props的safearea值)
						width: 72, // 回到顶部图标的宽度, 默认72 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx)
						radius: "50%" // 圆角, 默认"50%" (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx)
					},
					empty: {
						use: true, // 是否显示空布局
						icon: "https://www.mescroll.com/img/mescroll-empty.png", // 图标路径
						tip: '~ 暂无相关数据 ~', // 提示
						btnText: '去逛逛 >', // 按钮
						fixed: false, // 是否使用fixed定位,默认false; 配置fixed为true,以下的top和zIndex才生效 (transform会使fixed失效,最终会降级为absolute)
						top: "100rpx", // fixed定位的top值 (完整的单位值,如 "10%"; "100rpx")
						zIndex: 99 // fixed定位z-index值
					},
					onScroll: true // 是否监听滚动事件, 默认false, 仅mescroll-uni生效; mescroll-body直接声明onPageScroll (配置为true时,可@scroll="scroll"获取到滚动条位置和方向; 注意监听列表滚动是非常耗性能的,很容易出现卡顿,非特殊情况不要配置此项)
				},
				targetTop: 0, // 存储目标元素距离顶部的距离
				indexArr: '',
				valueArr: '',
				cateCode: ""
			};
		},
		onLoad(opt) {
			uni.setNavigationBarTitle({
				title: opt.cpsname
			});
			this.cateCode = opt.cpsCote
		},
		onShow() {
			this.cityName = uni.getStorageSync('city') ? uni.getStorageSync('city') : "枣庄";
		},
		methods: {
			handle(path) {
				uni.$u.route(path);
			},

			handDetails(item) {
				uni.navigateToMiniProgram({
					appId: item.appId, //目标小程序appid
					path: item.pagePath, //需要打开的目标路径
					extraData: {
						'data1': 'test'
					},
					envVersion: 'release', //小程序版本：develop（开发版），trial（体验版），release（正式版）
					success(res) {
						// 打开成功
					}
				})
				// uni.navigateTo({
				// 	url: '/pages/category/webview?url=' + encodeURIComponent('https://kzurl03.cn/7h3pd6')
				// });

			},
			togglePage() {
				// this.menuTop = 100
				this.filterShow = true;
				this.scrollListShow = false
			},

			/*下拉刷新的回调 */
			downCallback() {
				// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
				// loadSwiper();
				this.mescroll.endSuccess()
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {


				let data = {
					cateCode: this.cateCode,
					size: page.size,
					current: page.num,
				}
				//联网加载数据
				this.$api.getActivityListApi(data).then(res => {
					//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
					//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;

					//方法一(推荐): 后台接口有返回列表的总页数 totalPage
					//this.mescroll.endByPage(res.list.length, totalPage); //必传参数(当前页的数据个数, 总页数)

					//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
					//this.mescroll.endBySize(res.list.length, totalSize); //必传参数(当前页的数据个数, 总数据量)

					//方法三(推荐): 您有其他方式知道是否有下一页 hasNext
					//this.mescroll.endSuccess(res.list.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)

					//方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据
					this.mescroll.endSuccess(res.data.records.length);

					//设置列表数据
					if (page.num == 1) this.goods = []; //如果是第一页需手动制空列表
					this.goods = this.goods.concat(res.data.records); //追加新数据
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			// 点击回到顶部按钮的回调
			topClick() {
				console.log('点击了回到顶部按钮');
			},
			scroll() {
				this.targetTop = this.mescroll.getScrollTop()
				console.log(this.targetTop)
				this.scrollListShow = true
				this.menuTop = 480
			},


		}

	}
</script>

<style lang="scss" scoped>
	.filterCss {
		// position: fixed;
		// top: 100rpx;
		// width: 100%;
	}

	.header {
		background: url(../../static/images/head_bg.png) no-repeat;
		width: 100%;
		height: 35vw;
		padding: 0 4%;
		display: flex;
		align-items: center;
	}

	.scroll-list {
		@include flex(column);

		&__goods-item {
			margin-right: 20px;

			&__image {
				width: 60px;
				height: 60px;
				border-radius: 4px;
			}

			&__text {
				color: #f56c6c;
				text-align: center;
				font-size: 12px;
				margin-top: 5px;
			}
		}

		&__show-more {
			background-color: #fff0f0;
			border-radius: 3px;
			padding: 3px 6px;
			@include flex(column);
			align-items: center;

			&__text {
				font-size: 12px;
				width: 12px;
				color: #f56c6c;
				line-height: 16px;
			}
		}

		&__line {
			@include flex;
			margin-top: 10px;

			&__item {
				margin-right: 15px;
				text-align: center;

				&__image {
					width: 50px;
					height: 48px;
				}

				&__text {
					margin-top: 5px;
					color: $u-content-color;
					font-size: 12px;
					text-align: center;
				}

				&--no-margin-right {
					margin-right: 0;
				}
			}
		}
	}

	.classify-list {
		white-space: nowrap;
		width: 100%;
		height: 70rpx;
		overflow-x: auto;
		overflow-y: hidden;

		.list {
			position: relative;
			display: inline-block;
			width: 20%;
			height: 100%;
			line-height: 70rpx;
			text-align: center;

			text {
				font-size: 28rpx;
				color: #000;
				opacity: 0.8;
			}

			.line {
				position: absolute;
				left: 50%;
				bottom: 12rpx;
				width: 60%;
				height: 8rpx;
				background: linear-gradient(to right, #f8f893, #fe9d00);
				border-radius: 10rpx;
				transform: translate(-50%, 0);
			}
		}

		.action {
			text {
				font-size: 32rpx;
				opacity: 1;
			}
		}
	}

	.bg-red {
		background: url(../../static/images/head_bg.png) no-repeat;
		width: 100%;
		color: #fff;
		padding: 0 4%;
		display: flex;
		align-items: center;

		.list {
			text {
				color: #fff !important;
			}
		}
	}

	/deep/ .combox .mescroll-body {
		min-height: 200rpx !important;
		margin-bottom: 20px !important;
	}

	.sticky-tabs {
		z-index: 990;
		position: sticky;
		top: 0
	}

	.good-list {
		position: relative;

		.good-li {
			display: flex;
			align-items: center;
			padding: 20rpx;
			border-bottom: 1rpx solid #eee;

			.good-img {
				width: 160rpx;
				height: 160rpx;
				margin-right: 20rpx;

			}

			.flex-item {
				flex: 1;

				.good-name {
					font-size: 26rpx;
					margin-bottom: 10px;
					overflow: hidden;
				}

				.good-price {
					font-size: 26rpx;
					color: #666666;
				}

				.good-sold {
					font-size: 24rpx;
					margin-left: 16rpx;
					color: gray;
				}

			}
		}
	}
</style>